@charset "utf-8";
@import url(dll.css);
@import url(font.css);
@import url(main.css);
@import url(/onlinecss/onlineeditor.css);
@import url(ddsmoothmenu.css);
@import url(animate.css);
@import url(banner.css);
/* ��ҳ���ֿ�ʼ */
.mfbox{width:1000px; margin:0 auto;}
.header{ position:relative; width:100%; height:90px; z-index:9000; background:#FFF; box-shadow:0 0 5px 2px rgba(0,0,0,.1);}

.logo{float:left;}
.header_r{float:right; margin-top:10px; height:21px;}

.i_nav ul li:hover ul {
    display:  block !important;
    visibility: visible;
}




.hd_search{float:right; width:125px; height:19px; padding:0 9px; border:1px solid #cecece; border-radius:9px;}
.hd_search li{float:left;}
.hd_search li input{float:left; height:19px;}
.hd_search li input.hd_sint{width:106px;}
.hd_search li input.hd_sbtn{width:19px; background:url(../Images/btn_search.png) no-repeat center center; cursor:pointer;}

.hd_tel{float:right; height:18px; padding:0 20px 0 25px; background:url(../Images/icon_tel.png) no-repeat left center;}
.hd_share{float:right; height:18px; padding:0 5px 0 0;}
.hd_share a{float:left; margin:0 5px;}


.i_nav{float:right; height:59px;}

.lan{ position: absolute; top: 5px;left: 88%;display:none;}
.lan li{float:left; padding-right:5px;}
/*.i_nav li{float:left; height:59px;}
.i_nav li > a{display:block; color:#000; padding:0 18px; height:56px; line-height:56px; font-size:14px; border-bottom: 3px solid transparent; text-align:center;}
.i_nav li > a:hover{color:#0069b3; border-bottom:3px solid #0069b3;}*/

.i_banner_box{position:relative; width:100%; height:660px; overflow:hidden;}
.i_banner{ float:left; display:inline;}
/*.i_banner li{width:100%; height:660px;}
.i_banner li a{display:block; width:100%; height:660px;}
.i_banner_p{position:absolute; width:100%; left:0; bottom:20px; text-align:center;}
.i_banner_p a{display:inline-block; margin:0 5px; width:12px; height:12px; background:#FFF; overflow:hidden; border-radius:6px;}
.i_banner_p a:hover{ background:#0069b3;}
.i_banner_p a.on{ background:#0069b3;}*/

.i_container{overflow:hidden;}

.txt01{width:800px; margin:0 auto; text-align:center; color:#999; font-size:14px; line-height:18px;}

.i_solution{ width:100%; padding:60px 0; background:url(../Images/bg_1.jpg) repeat left top;}
.i_solution_l{width:1000px; position:relative; margin:70px auto 0;}
.i_solution_lo{width:1000px; overflow:hidden;}
.i_solution_li{width:5000px;}
.i_solution_li dl{float:left; display:inline-block; margin:0 10px; width:228px; border:1px solid #dfdfdf; background:#FFF;}
.i_solution_li dl dt{width:228px; height:258px; overflow:hidden;}
.i_solution_li dl dt img{width:228px; height:258px;}
.i_solution_li dl dd{width:228px; text-align:center; padding-bottom:20px;}
.i_solution_li dl dd h4{font-size:20px; line-height:34px; padding:20px 0 10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.i_solution_li dl dd span{ display:block; padding:0 10px; font-size:12px; line-height:18px; color:#AAA; height:36px; overflow:hidden;}
.i_solution_li dl a:hover dt img{ transform:scale(1.2);}
.i_solution_li dl a:hover dd h4{color:#0069b3;}

.i_pro{ width:100%; padding:60px 0; background:url(../Images/bg_2.jpg) repeat left top;}
.i_pro_l{width:1000px; position:relative; margin:60px auto 0;}
.i_pro_lo{width:1000px; overflow:hidden;}
.i_pro_li{width:1000px;}
.i_pro_li dl{float:left; display:inline-block; margin:13px 10px; width:480px; height:197px; background:#f9f9f9;  -moz-box-shadow: 4px 4px 0px 0px #ececec; -webkit-box-shadow: 4px 4px 0px 0px #ececec; box-shadow: 4px 4px 0px 0px #ececec;}
.i_pro_li dl dt{float:left; width:210px; height:170px; padding:14px 10px 13px 10px; overflow:hidden;}
.i_pro_li dl dt img{width:210px; height:170px;}
.i_pro_li dl dd{float:left; width:235px; height:170px; padding:14px 10px 13px 5px;}
.i_pro_li dl dd h4{font-size: 18px; padding:0 0 10px 0; color:#0069b3; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.i_pro_li dl dd span{ display:block; font-size:12px; line-height:20px; color:#AAA; height:120px; overflow:hidden;}
.i_pro_li dl a:hover dt img{ transform:scale(1.2);}
.i_pro_li dl a:hover dd h4{color:#0069b3;}

.i_case{ width:100%; padding:60px 0; background:url(../Images/bg_1.jpg) repeat left top;display:none;}
.i_case_l{width:1000px; position:relative; margin:70px auto 0;}
.i_case_lo{width:1000px; overflow:hidden;}
.i_case_li{width:5000px;}
.i_case_li dl{float:left; position:relative; display:inline-block; margin:0 10px; width:230px; height:260px;}
.i_case_li dl dt{width:230px; height:260px; overflow:hidden;}
.i_case_li dl dt img{width:230px; height:260px;}
.i_case_li dl dd{ position:absolute; width:210px; height:58px; padding:16px 10px; left:0; bottom:0; text-align:center; background-color:rgba(5,113,182,0.8);}
.i_case_li dl dd h4{font-size:20px; line-height:34px; color:#FFF; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.i_case_li dl dd span{ display:block; font-size:12px; line-height:24px; color:#dfdfdf; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; height:24px;}
.i_case_li dl a:hover dt img{ transform:scale(1.2);}


.footer{overflow:hidden; width:100%; color:#FFF; background:#FFF;}
.footer_in{width:1000px; margin:0 auto; padding:10px 0 50px;}

.fnav{float:left; width:780px;}
.fnav dl{float:left; width:120px; padding-right:10px;}
.fnav dl dt{padding-bottom:10px; line-height:30px; font-size:16px;}
.fnav dl dt a{color:#414141;}
.fnav dl dt a:hover{color:#0069b3;}
.fnav dl dd{line-height:25px; font-size:12px;}
.fnav dl dd a{color:#999999;}
.fnav dl dd a:hover{color:#0069b3;}

.f_contact{float:right; width:200px; color:#414141;}
.f_contact h4{ display:block; font-size:16px; padding-bottom:10px;}
.f_contact strong{ display:block; color:#0874b9; font-size:24px; font-style:italic;}
.f_contact span{display:block;}

.fbox{width:100%; background:#0874b9; color:#FFF; padding:25px 0; font-size:12px; line-height:20px; }
.footer_nav{float:left;}
.footer_nav a{ padding:0 10px; color:#FFF;}
.copyright{float:right;}
.jsq{ text-align:right;}
.pfooter{padding:30px 0 0; border-top:3px solid #0069b3;}

/* ��ҳ���ֽ��� */

/* ��ҳ���ֿ�ʼ */
.p_banner_box{position:relative; width:100%; padding-top:90px; height:277px; overflow:hidden;}
.p_banner{ float:left; display:inherit;}
.p_banner_in{position: absolute; width:1440px; bottom:3%;    display: none;}
.p_banner_in h3{ display:block; margin:0 auto; width:1000px; color:#f4f4f4; font-size:70px; font-style:italic; font-family:'Arial','sans-serif'; text-transform: uppercase; font-weight:bold;}

.p_container{border-top: 5px solid #7fb4d9; overflow:hidden;}

.sidebar{width:100%; text-align:center; background:#f4f4f4;}
.sortnavul{ width:1000px; margin:0 auto; overflow:hidden;}
/*.sidebar_l a {display:inline-block; float:left; font-size: 16px; color: #666; margin-right: 22px; padding:35px 0px; line-height:30px;}
.sidebar_l a:hover{ color:#0069b3;}
.sidebar_l a.on{ color:#0069b3; background:url(../Images/icon02.png) no-repeat center bottom;}*/


.p_sev{width:1040px; padding:50px 0; margin:0 auto;}
/*.p_sev dl{float:left; display:inline-block; margin:13px 20px; width:480px; height:197px; background:#f9f9f9;  -moz-box-shadow: 4px 4px 0px 0px #ececec; -webkit-box-shadow: 4px 4px 0px 0px #ececec; box-shadow: 4px 4px 0px 0px #ececec;}
.p_sev dl dt{float:left; width:210px; height:170px; padding:14px 10px 13px 10px; overflow:hidden;}
.p_sev dl dt img{width:210px; height:170px;}
.p_sev dl dd{float:left; width:235px; height:170px; padding:14px 10px 13px 5px;}
.p_sev dl dd h4{font-size: 18px; padding:0 0 10px 0; color:#0069b3; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.p_sev dl dd span{ display:block; font-size:12px; line-height:20px; color:#AAA; height:120px; overflow:hidden;}
.p_sev dl a:hover dt img{ transform:scale(1.2);}
.p_sev dl a:hover dd h4{color:#0069b3;}*/

.p_kf{width:1008px; padding:50px 0; margin:0 auto;}
.p_kf dl{float:left; display:inline-block; margin:0 5px; width:242px; height:326px; text-align:center; background:#f9f9f9;}
.p_kf dl a{ display:block; width:242px; height:268px; padding-top:58px; background:#f4f4f4;}
.p_kf dl i{ display:block; margin:0 auto; width:64px; height:64px;}
.p_kf dl i.pkf01{ background:url(../Images/sicon01.png) no-repeat center center;}
.p_kf dl i.pkf02{ background:url(../Images/sicon02.png) no-repeat center center;}
.p_kf dl i.pkf03{ background:url(../Images/sicon03.png) no-repeat center center;}
.p_kf dl i.pkf04{ background:url(../Images/sicon04.png) no-repeat center center;}
.p_kf dl dt{width:222px; height:30px; padding:0 10px; margin-top:35px; font-size:20px; line-height:30px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.p_kf dl span{ display:block; padding:10px 0; font-size:12px; line-height:20px; text-transform: uppercase; color: #b9b9b9;}
.p_kf dl ins{ display:block; width:74px; height:4px; margin:0 auto; background:#000000;}
.p_kf dl dd{float:left; width:222px; padding:15px 10px; line-height:20px; color:#666;}

.p_kf dl a:hover{ display:block; background:#80b7db;}
.p_kf dl a:hover i.pkf01{ background:url(../Images/sicon01_on.png) no-repeat center center;}
.p_kf dl a:hover i.pkf02{ background:url(../Images/sicon02_on.png) no-repeat center center;}
.p_kf dl a:hover i.pkf03{ background:url(../Images/sicon03_on.png) no-repeat center center;}
.p_kf dl a:hover i.pkf04{ background:url(../Images/sicon04_on.png) no-repeat center center;}
.p_kf dl a:hover dt{color:#FFF;}
.p_kf dl a:hover span{color:#FFF;}
.p_kf dl a:hover dd{color:#FFF;}
.p_kf dl a:hover ins{ background:#FFF;}

/* ��ҳ���ֽ��� */

.i_sev{width:1040px;  margin:0 auto;}
.p_left{ float:left;}
.p_right{ float:right;}



/*响应式制作开始*/
.i_banner_box123 img{max-width: 100%;}



@media screen and (max-width: 1366px) { /*当屏幕尺寸小于1366px时，应用下面的CSS样式*/

}/*当屏幕尺寸小于1366px时，结束应用下面的CSS样式*/

@media screen and (max-width: 1024px) { /*当屏幕尺寸小于1024px时，应用下面的CSS样式*/
.p_p_list dl {margin: 13px 13px;}
.soll-item { padding: 0px 8px;}
.n_j_list { width: 96%;margin: 0 auto;}
.p_container{-moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;-ms-box-sizing: border-box; box-sizing: border-box;
					width:100%;padding: 10px;}
.p_sev {width: 100%;padding:0px;}
}/*当屏幕尺寸小于1024px时，结束应用下面的CSS样式*/

@media screen and (max-width: 768px) { /*当屏幕尺寸小于768px时，应用下面的CSS样式*/
.mfbox {width: 100%;}
.i_nav{display:none}
.navbar-toggle{display:block;position: relative;}
.i_nav { width: 100%; height: auto; right: 0; z-index: 9999;margin:0px;position: absolute;top: 79px;}
.ddsmoothmenu ul {  width: 100%;}
.ddsmoothmenu ul li {  width: 100%; height: auto;border-bottom: 1px #f6f6f6 solid;background: #fff;}
.nava:hover,.navactive:hover { background: #fff;}
.ddsmoothmenu ul li  a{color:#000;}
.ddsmoothmenu ul li  a:hover{color:#0069b3;}
.ddsmoothmenu ul li a.navactive {width: 100%;background:#0069b3;color: #fff;}
.nava { width: 100%; height: 40px; line-height: 40px; border: none;}
.navactive, .navactive:hover { width: 100%;line-height: 40px; height: 40px;background: #8cc63f;padding:0px;}
.navactive, .navactive:hover, .nava, .nava:hover { width: 100%;font-size: 13px;padding:0px;line-height:40px;}
.ddsmoothmenu ul li a {width: 100%;}
.i_nav ul li ul { position: relative; width: 100% !important;}
.i_nav ul li ul li { width: 100%; border: 0;}
.i_nav ul li ul li a { width: 100%;}
.iconfont.icon-next-copy {font-size: 30px !important;}
.hbox {display: none;}
.i_solution {width: 100%;-webkit-box-sizing: border-box; -o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;padding: 10px 0;}
.txt01 { width: 100%;}
.i_solution_l {width: 80% !important;margin:0px; margin:0 auto;}
.i_solution_lo {width: 100%;}

.i_case {width: 100%;-webkit-box-sizing: border-box; -o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;padding: 10px 0;}
.title01.wow.fadeInUp.animated.animated{ width: 100%;}
.i_case_l {width: 80% !important;margin:0px; margin:0 auto;}
.i_case_lo{width: 100%;}
.i_pro_l { width: 100%;}
.i_pro_lo { width: 64% !important; margin: 0 auto;}
.rol02 { left: 46px;}
.ror02 { right: 46px;}
.i_pro_li { width: 100% !important;}
.i_pro_li dl dt { width: 150px;height: 130px; padding: 14px 0px 13px 0px;}
.i_pro_li dl dt img {width: 150px; height: 130px;}
.i_pro_li dl dd { width: 150px; height: 130px;padding: 14px 0px 13px 0px;}
.i_pro_l.wow.fadeInUp.animated.animated .rol01 {left: 26px;}
.i_pro_l.wow.fadeInUp.animated.animated .ror01 {right: 26px;}
.p_container{-moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;-ms-box-sizing: border-box; box-sizing: border-box;
					width:100%;padding: 10px;}
.sortnavul li {padding-left: 3%;}
.news-item { width: 50%;padding: 10px 0px;}
.p_sev { padding: 10px 0;width: 100%;}
.news-item a{margin:0 auto;}
.p_p_list {width: 100%;}
.p_p_list { width: 100%;text-align: center;}
.p_p_list dl {float:none;}
.p_p_list dl dd span {text-align: left;}
.n_j_list { width: 100%;}
.n_j_list li{ width: 100%;}
.n_j_list li a {width: 66.6%;}
.n_j_list li span{width:30%;}
.p_kf { width: 100%;padding: 10px 0;}
.p_kf dl {margin: 10px 1px;width: 49%;background:none;}
.p_kf dl a {margin: 0 auto;}
.soll-item {padding: 0px 3px;width: 49%;height: auto;}
.soll-item img {margin: 0 auto; width: 100%;height:auto;}
.i_pro {padding: 10px 0;}
.i_pro_l {margin: 10px auto 0;}
}/*当屏幕尺寸小于768px时，结束应用下面的CSS样式*/

@media screen and (max-width: 760px) {/*当屏幕尺寸小于760px时，应用下面的CSS样式*/
.i_nav{display:none}
.navbar-toggle{display:block;}
.txt01 {width: 100%;}
.i_solution {margin-top: ;}


}/*当屏幕尺寸小于760px时，结束应用下面的CSS样式*/

@media screen and (max-width: 480px) { /*当屏幕尺寸小于480px时，应用下面的CSS样式*/
 .i_solution_lo {width: 252px;margin: 0 auto;}
 .rol01 {left: -23px;}
.ror01 {right: -23px;}
.i_solution_li { width: 100% !important;}
.i_solution_li ul{ }

 .i_case_lo {width: 252px;margin: 0 auto;}
 .rol01 {left: -23px;}
.ror01 {right: -23px;}
.i_case_li { width: 100% !important;}
.news-item { width: 100%;}
.p_p_list dl { float: none;width: 100%;margin: 10px auto;}
.p_p_list dl dt {width: 150px;height: 120px;}
.p_p_list {padding: 0px 0 10px 0;}
.soll-item { padding: 0px;width: 100%;}
.soll-item-txt dt {width: 100%;}
.soll-item-txt dd{width: 100%;}
.p_kf dl {width: 100%;}/*当屏幕尺寸小于480px时，结束应用下面的CSS样式*/

@media screen and (max-width: 414px) { /*当屏幕尺寸小于414px时，应用下面的CSS样式*/
  .i_container {overflow: visible;}
  div#Agentslist2 li{margin-left: -4px;width: 472px;height: 223px;}
  div#Agentslist21 li{margin-left: -4px;width: 472px;height: 223px;}
  .i_pro_li dl dt{   /* padding: 14px 10px 13px 0px;*/margin-left: -17px;padding: 14px 0px 13px 0px;}
  .i_pro_l.wow.fadeInUp.animated.animated .ror01 { right: 13px;}
    .i_pro_l.wow.fadeInUp.animated.animated .rol01 { left: 13px;}
  .i_pro_li dl dd{    padding: 14px 10px 13px 0px;margin-left: -35px;}
  .i_pro_li dl dt img {width: 80%;margin-left: 5%;}
  .f_contact {/* float: right; */width: 100%;margin: 0 auto;text-align: center;color: #414141;}
  .fnav dl {float: left;width: 24%;height: 240px;}
  .fnav {float: left;width: 100%;margin-left: 15%;height: 415px;}
  .footer_in {width: 100%;}
  .footer_nav {float: left;margin-left: 17%;}
  .copyright {float: left;text-align: center;margin-left: 25%;}
  .news-item {float: left;padding: 0 23px 32px 5.5%;}
  #com_definedkeys_1 {display: none;}
  .navPage {margin-left: 11%;}
  .p_sev {width: 100%;}
  .p_p_list {width: 100%;}
 .p_p_list dl dd { width: 200px;height: 130px;}
 .p_p_list dl dd h4 { font-size: 16px; padding: 0 0 0px 0;}
  .p_p_list dl dt img {width: 100%;height:auto;}
  .p_kf {width: 100%;margin: 0 auto;}
  .p_kf dl {}
  .productview {position: relative;width: 90%;margin-left: 5%;}
  
  .n_j_list li {height: 36px;line-height: 36px;border-bottom: 1px dashed #d5d5d5;width: 100%;}
  .n_j_list li a {width: 70%;}
  .n_j_list li span {width: 30%;}
 
  .i_solution {margin-top: -30px;}
  .sortnavul {width: 100%;margin: 0 auto;overflow: hidden;}
  .sortnavul li {margin-left: 30%;}
  .news-item a {border: 1px solid #dbdbdb;display: block;padding: 18px 19px;transition: all 0.3s ease 0s;width: 100%;}
.title01 {  height: 26px; line-height: 26px;}
.title01 h3 { font-size: 26px;}
.title01 span { font-size: 26px;}
.i_solution_li dl dd h4 {font-size: 12px;line-height: 14px;padding: 6px 0 0px;}
.news-item { padding: 10px 0;text-align: center;margin: 0 auto;}
.news-item .news-item-img img {margin: 0 auto;}
.news-item a {padding: 0px;}
.sortnavul li a {padding: 15px 0px;}
.p_kf dl a {padding-top: 12px;}
.p_kf dl { height: 286px;}


}/*当屏幕尺寸小于414px时，结束应用下面的CSS样式*/

@media screen and (max-width: 375px) { /*当屏幕尺寸小于375px时，应用下面的CSS样式*/
	.news-item {float: left;padding: 0 23px 32px 0;}
    .p_kf dl {}
 	 .p_p_p_list {margin-left: 0;}
.rol01, .ror01 { width: 23px; height: 23px;}
.rol01 a, .ror01 a { width: 23px;height: 23px;}
.i_pro_lo { width: 72% !important;}
.p_p_list dl dd { width: 170px;}

}/*当屏幕尺寸小于375px时，结束应用下面的CSS样式*/


@media screen and (max-width: 360px) { /*当屏幕尺寸小于360px时，应用下面的CSS样式*/
.iconfont.icon-next-copy {font-size: 26px !important;}
.p_p_list dl dd {width: 150px;}
}/*当屏幕尺寸小于360px时，结束应用下面的CSS样式*/


@media screen and (max-width: 320px) { /*当屏幕尺寸小于320px时，应用下面的CSS样式*/
.i_solution {margin-top: 0;}
#Agentslist3 li {}
.i_solution .title01 {margin-top: -20px;}
#com_indexistop_products .title01 {height: 30px;margin-top: 0px;}
.i_case {}
.news-item {width: 100%;}
.news-item a {width: 100%;}
.p_kf dl {}
.soll-item {}
.soll-item-txt dt {width: auto;}
.soll-item-txt dd {width: auto;}
.fnav dl {height: 260px;}
.i_pro_lo { width: 80% !important;}
  .i_pro_l.wow.fadeInUp.animated.animated .ror01 { right: 3px;}
    .i_pro_l.wow.fadeInUp.animated.animated .rol01 { left: 3px;}
.news-item h5 {font-size: 12px;line-height: 14px;height: 14px;}
.p_n_title { font-size: 14px;}
.p_n_info {display: none;}
.p_p_list dl { height: 120px;}
.p_p_list dl dt {width: 120px;height: 90px;}
.p_p_list dl dd {width: 140px;height: 130px;}
.p_p_list dl dd span {height: 60px;}
.p_p_list dl dd h4 {font-size: 12px;padding: 0 0 0px 0;}
}/*当屏幕尺寸小于320px时，结束应用下面的CSS样式*/